<template>
  <div class="app-container" :loading="submitLoading">
    <div class="filter-container">
      <div style="align-items: center;display: flex;">
        <div>
          <el-input v-model="listQuery.keyword" placeholder="搜索关键字" clearable></el-input>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchList()">
          搜索
        </el-button>
        <el-button type="primary" icon="el-icon-refresh-right"  @click="Refresh()">
          刷新
        </el-button>
        <el-button style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="add">
          添加
        </el-button>


        <el-tooltip class="item" effect="dark" content="选择生产平台的用户账户，加入市场平台，就可以用同一个账户登录2个平台" placement="top">
            <el-button style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="adduser">
              添加生产平台老用户
            </el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 列表 -->
    <el-table :data="list" v-loading="listLoading" border style="width: 100%;">
      <el-table-column label="uid" prop="id" align="center" width="70">
        <template slot-scope="{row}">
          <span>{{ row.uid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账户/手机号" align="left">
        <template slot-scope="scope">
          <span>{{scope.row.account}}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" width="260">
        <template slot-scope="scope">
          <span>{{scope.row.real_name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="登录IP" align="center" width="260">
        <template slot-scope="scope">
          <span>{{scope.row.last_ip}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="130">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top">
            <el-button size="mini" icon="el-icon-edit" type="success" @click="edit(scope.row)">
              <!-- 修改 -->
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-popconfirm title="确定删除吗？" @onConfirm="list_del(scope)">
              <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-delete" type="danger">
                <!-- 删除 -->
              </el-button>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 各个弹框-->
    <el-dialog v-dialogDrag title="编辑" :visible.sync="popup_edit_show" width="50%" center >
      <div>
        <el-form ref="diary_details" :rules="rules" :model="diary_details" label-width="100px" style="text-align: left;">
          <el-form-item label="账号/手机号" prop="account">
            <el-input type="type" v-model="diary_details.account" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="real_name">
            <el-input type="type" v-model="diary_details.real_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password"
            placeholder="不填写密码就是不修改密码"
            show-password
            v-model="diary_details.pwd"
            auto-complete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item label="重复密码">
            <el-input type="password"
            placeholder="不填写密码就是不修改密码"
            show-password
            v-model="diary_details.pwd2"
            auto-complete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="market_role">
            <el-select v-model="diary_details.market_role" placeholder="请选择">
                <el-option
                  v-for="item in role_drop"
                  :key="item.id"
                  :label="item.role_name"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup_edit_show = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit_edit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag title="添加" center :visible.sync="popup_add_show" width="50%" center >
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="账号/手机号" prop="account">
            <el-input type="type" v-model="ruleForm.account" autocomplete="off" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="real_name">
            <el-input type="type" v-model="ruleForm.real_name" autocomplete="off" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input type="password"
            show-password v-model="ruleForm.pwd"
            placeholder="请输入密码"
            auto-complete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item label="重复密码" prop="pwd2">
            <el-input type="password"
            show-password v-model="ruleForm.pwd2"
            placeholder="请输入重复密码"
            auto-complete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="market_role">
            <!-- <el-input type="type" v-model="ruleForm.market_role" autocomplete="off" ></el-input> -->
            <el-select v-model="ruleForm.market_role" filterable placeholder="请选择">
                <el-option
                  v-for="item in role_drop"
                  :key="item.id"
                  :label="item.role_name"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup_add_show = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit_add()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 生产平台老用户 -->
    <el-dialog v-dialogDrag title="生产平台老用户" :visible.sync="popup_addusers_show" width="40%" center>
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="请选择用户" prop="user_keyword">
            <!-- :remote-method="remoteMethod" -->
             <!-- <el-select
                v-model="ruleForm.user_keyword"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :loading="loading"
                :remote-method="remoteMethod"
                clearable
                 >
                <el-option
                  v-for="item in user_for"
                  :key="item.uid"
                  :label="item.real_name"
                  :value="item.uid">
                </el-option>
              </el-select> -->
              
              <!-- @change="selet()" -->
              <el-select
                style="width: 150px"
                v-model="ruleForm.user_keyword"
                :filterable="true"
                :remote="true"
                :multiple="false"
                reserve-keyword
                placeholder="搜索负责人"
                :remote-method="remoteMethods"
                :loading="loading"
                clearable
              >
                <el-option
                  v-for="item in user_for"
                  :key="item.uid"
                  :label="item.real_name"
                  :value="item.uid"
                >
                </el-option>
              </el-select>


            <!-- <el-select v-model="ruleForm.user_keyword" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in user_for"
                  :key="item.uid"
                  :label="item.real_name"
                  :value="item.uid">
                </el-option>
              </el-select> -->
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup_addusers_show = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit_adduser()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页-->
    <div class="fenye">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="page_limit"
        layout="total, sizes, prev, pager, next, jumper" :total="page_count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    user_list,
    user_del,
    user_add,
    user_edit,
    role_list,
    user_select_list_product,
    change_product_to_market
  } from '@/api/user/user_userlist.js'
  export default {
    name: 'setup_notice',
    data() {
      return {
        loading:false,
        user_for:[],
        role_drop:[],
        market_role: '',
        ruleForm: {
          title: '',
          content: '',
          sort: 0,
          is_top: false,
          user_keyword:"",
        },
        rules: {
          real_name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          pwd: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          pwd2: [{
            required: true,
            message: '请输入重复密码',
            trigger: 'blur'
          }],
          account: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          market_role: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }],
          user_keyword:[
            {
              required: true,
              message: '请选择用户名',
              trigger: 'blur'
            }
          ]
        },
        listLoading: 0,
        submitLoading: false,
        popup_edit_show: false,
        popup_add_show: false,
        popup_addusers_show:false,
        diary_details: {},
        dialogVisible: false,
        list: null,
        listQuery: {
          keyword:"",
        },
        // tableKey: 1,
        currentPage: 1,
        page_count: 0,
        page_limit: 10,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        }
      }
    },
    created() {
      this.getList()
      this.role_obtain()
      //老用户默认数据
      this.oid_user()
    },
    mounted() {

    },
    methods: {
      remoteMethods(e){
        console.log(e)
        this.ruleForm.user_keyword=e
        this.loading = true;
        user_select_list_product(e).then(res=>{
          this.user_for=res.data.list
          this.loading = false;
        })
      },
      //老用户默认数据
      oid_user(){
        this.loading=true
        user_select_list_product(this.ruleForm.user_keyword).then(res=>{
          console.log(res)
          this.user_for=res.data.list
          this.loading=false
        })
      },

      //老用户弹框ok
      submit_adduser(){
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            change_product_to_market(this.ruleForm.user_keyword).then(res=>{
              console.log(res)
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.popup_addusers_show=false
              this.getList()
            })
          }
        })
      },
      //老用户按钮
      adduser(){
        this.popup_addusers_show=true
      },
      // 获取列表数据
      getList(page, limit, listQuery) {
        page = page || this.currentPage
        limit = limit || this.page_limit
        //定义listquery，为了下方可以使用key_word.....
        listQuery = listQuery || this.listQuery
        let keyWord = listQuery.keyword || ''
        console.log('9999999999',listQuery.searchTime)
        // let searchTime = listQuery.searchTime && listQuery.searchTime.length>0 ? listQuery.searchTime.toString() : ''
        this.listLoading = true
        user_list(page, limit, keyWord).then(res => {
          console.log(res, "公告")
          this.list = res.data
          this.page_count = res.count
          this.listLoading = false
        })
      },
      //角色获得
      role_obtain(){
        role_list().then(res=>{
          console.log(res)
          this.role_drop=res.data
        })
      },
      //搜索事件
      searchList(){
        console.log(this.currentPage,"222")
        this.getList(1, this.page_limit, this.listQuery)
      },
      Refresh(){
        this.listLoading = true
        this.listQuery.keyword=""
        user_list(1,10,"").then(res=>{
          console.log(res)
          if(res.code==200){
          this.currentPage=1
          this.page_limit=10
          this.list = res.data
          this.listLoading = false
          this.page_count = res.count
          }
        })
      },
      //每页几条数据
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page_limit = val
        this.getList(1, val,this.listQuery);
      },
      //跳转到
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getList(val, this.page_limit,this.listQuery);
      },
      //新增数据提交
      submit_add() {
        console.log(this.ruleForm.market_role,"www")
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.submitLoading = true
            user_add(this.ruleForm.account,this.ruleForm.real_name, this.ruleForm.pwd, this.ruleForm.pwd2,this.ruleForm.market_role).then(
              res => {
                if (res.code == 200) {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  });
                  this.getList(this.currentPage,this.page_limit,this.listQuery)
                  this.popup_add_show = false
                  this.submitLoading = false
                  this.ruleForm.real_name = ""
                  this.ruleForm.ruleForm.pwd = ""
                  this.ruleForm.ruleForm.pwd2 = ""
                  this.ruleForm.ruleForm.account = ""
                  this.ruleForm.ruleForm.market_role = ""
                }
              }).catch(() => {
              this.submitLoading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      list_del(val) {
        let that = this
        user_del(val.row.uid).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.getList(this.currentPage, this.page_limit, this.listQuery)
          }
        })
      },
      list_detail(val) {
        let that = this
        notice_detail(val.row.id).then(res => {
          console.log(res)
          if (res.code == 200) {
            that.dialogVisible = true
            that.diary_details = res.data
          }
        })
      },
      add(val) {
        this.ruleForm.is_top = false
        this.popup_add_show = true
      },
      edit(val) {
        this.diary_details = val
        this.ruleForm.is_top = val.is_top ? true : false
        this.popup_edit_show = true
        console.log(val)
        this.diary_details.pwd=""
      },
      submit_edit() {
        let that = this
        this.$refs.diary_details.validate((valid) => {
          if (valid) {
            console.log(that.diary_details.pwd,"sss",that.diary_details.pwd2,"fff")
            if(that.diary_details.pwd2==undefined){
              that.diary_details.pwd2=""
            }
            that.diary_details.is_top = that.diary_details.is_top?1:0
            that.submitLoading = true
            user_edit(that.diary_details).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                that.popup_edit_show = false
                that.submitLoading = false
                that.getList(this.currentPage,this.page_limit,this.listQuery)
              }
            })
          } else {
            console.log("输入框错误")
          }
        })
      }
    }
  }
</script>
<style type="text/css" scoped>
  .sort-class{
    color: #67B5F4;
    font-size: 12px;
  }
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .fenye {
    padding: 20px 0px;
  }

  .el-range-editor.el-input__inner {
    width: 205px !important;
    padding: 3px 3px !important;
  }
</style>
<style type="text/css">
  .el-dialog__body{overflow: auto !important;}
</style>
